import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Link } from "react-router-dom";

import Header from "../components/header";
import Notice from "../components/notice";
import AdImage from "../components/adImage";
import {loadPlayGameList,getSystemMessage,getSiteInfo}  from "../redux/actions/indexAction"

import FooterMenu from "../components/footerMenu";

class Index extends Component {
  constructor (props){
   super(props)
    }

    baseInfo(){
        return {
            nav:[{
                title: '充值提现',
                imgsrc: '/static/images/ICON_38.png',
                link: '/my/moneyrecord/chargerecord'
            },{
                title: '投注记录',
                imgsrc: '/static/images/ICON_39.png',
                link: '/record'
            },{
                title: '优惠活动',
                imgsrc: '/static/images/ICON_40.png',
                link: '/activitycenter'
            },{
                title: '走势图',
                imgsrc: '/static/images/ICON_41.png',
                link: '/awarditem'
            }],
            caiZhong:[{
                title: '香港六合彩',
                imgsrc: '/static/images/ICON_03.png',
                link: '/betcenter/HK6',
                desc:'全天120期'
            },{
                title: '重庆时时彩',
                imgsrc: '/static/images/ICON_27.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '新疆时时彩',
                imgsrc: '/static/images/ICON_07.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '广东快乐十分',
                imgsrc: '/static/images/ICON_05.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '北京PK拾',
                imgsrc: '/static/images/ICON_09.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '幸运28',
                imgsrc: '/static/images/ICON_25.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '幸运飞艇',
                imgsrc: '/static/images/ICON_26.png',
                link: '/',
                desc:'全天120期'
            },{
                title: '更多彩种',
                imgsrc: '/static/images/ICON_03.png',
                link: '/',
                desc:'全天120期'
            }]
        }
    }
    componentDidMount(){
        const {dispatch,Index} = this.props
        Index.get("playlist").length==0 && dispatch(loadPlayGameList())
        // Index.get("systemMessages").length==0 && dispatch(getSystemMessage())
        // Index.get("bannerlist").length ==0 && dispatch(getSiteInfo())
        Index.get("systemMessages").length==0 && dispatch(getSiteInfo())
          }
    
   render() {
    const {Index} = this.props
    const list = Index.get("playlist")

      return <div className="root">
          <Header title="首页" isIndex={true}></Header>
          
          <div className="container">
            {/* <AdImage  {...this.props} bannerlist={Index.get("bannerlist")}></AdImage>  */}
            <Notice {...this.props} content={Index.get("systemMessages")}></Notice>
        
            {/* <div className="nav">
                <ul>
                    {this.baseInfo().nav.map((item,index)=>{
                        return <li key={index}>
                                 <Link to={item.link}>
                                    <img src={item.imgsrc} alt=""/>
                                    <p>{item.title}</p>
                                 </Link>
                                </li>
                    })}
                    
                
                </ul>
            </div> */}

            <div className="allcz">
            <Link to='allaward'><h3>全部彩种</h3></Link>
                <ul>
                {list.map((item,index)=>{
                        return <li key={index}>
                        {/* <i className="iconfont icon-huobao"></i> */}
                                    <Link to={"/betcenter/"+item.gameCode}>
                                        <img src={"/static/images/ICON_"+item.gameCode+".png"} alt=""/>
                                        <h4>{item.gameName}</h4>
                                        {/* <p>{item.periodTotalStr}</p> */}
                                    </Link>
                                </li>
                    })}
                    {/* <li>
                        <i className="iconfont icon-huobao"></i> 
                                    <Link to={"/betcenter/HK6"}>
                                        <img src="/static/images/ICON_03.png" alt=""/>
                                        <h4>更多彩种</h4>
                                        <p>全天120期</p>
                                    </Link>
                    </li> */}
                </ul>
            </div>
        </div>


          <FooterMenu></FooterMenu>
      </div>
   } 
}

function mapStateToProps(state) {
  return {
    Index: state.Index // gives our component access to state through props.toDoApp
  }
}

export default connect(mapStateToProps)(Index)